<template>
  <div>
    <el-dialog v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" @title="title">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-col :span="18">
            <el-form-item label="设备编号" prop="deviceId">
              <el-input v-model="formData.deviceId" placeholder="请输入设备编号" 
                readonly clearable  :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="设备名称" prop="deviceName">
              <el-input v-model="formData.deviceName" placeholder="请输入设备名称" clearable
                :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
          <el-form-item label="所属公司" prop="deptId">
            <el-select v-model="formData.deptId" placeholder="请选择所属公司" clearable
              :style="{width: '100%'}"  collapse-tags>
              <el-option v-for="(item, index) in deptOptions" :key="index" :label="item.deptName" 
                :value="item.deptId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
          <el-col :span="18">
            <el-form-item label="设备类型" prop="deviceType">
              <el-select v-model="formData.deviceType" placeholder="请选择设备类型" clearable
                :style="{width: '100%'}">
                <el-option v-for="(item, index) in deviceTypeOptions" :key="index" :label="item.label"
                  :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="设备型号" prop="deviceModel">
              <el-input v-model="formData.deviceModel" placeholder="请输入设备型号" clearable
                :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="设备位置" prop="location">
              <el-input v-model="formData.location" placeholder="请输入设备位置" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="特征值抽取" prop="isOn">
              <el-radio-group v-model="formData.isOn" size="medium">
                <el-radio v-for="(item, index) in isOnOptions" :key="index" :label="item.value"
                  :disabled="item.disabled">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注"
                :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="id" prop="id" v-show="false">
              <el-input v-model="formData.id" placeholder="请输入id" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { deviceApi } from "@/api/business/device";
import {whiteApi} from "@/api/system/white";

export default {
  inheritAttrs: false,
  components: {},
  props: {
    // 是否为更新表单
    isUpdate: {
      type: Boolean,
      default: false
    },
    // 更新的表单数据对象
    updateData: {
      type: Object
    }
  },
  data() {
    return {
      title:"",
      formData: {
        deviceId: '',
        deviceName: undefined,
        deviceType: undefined,
        deviceModel: undefined,
        location: undefined,
        isOn: false,
        remark: undefined,
        id: '',
        deptId: ''
      },
      rules: {
        deviceId: [{
          required: true,
          message: '请输入设备编号',
          trigger: 'blur'
        }],
        deviceName: [{
          required: true,
          message: '请输入设备名称',
          trigger: 'blur'
        }],
        deviceType: [],
        deviceModel: [],
        location: [],
        isOn: [],
        field107: [],
        id: [],
        deptId: [
          { required: true, message: "请选择所属公司", trigger: "blur" }
        ]
      },
      deviceTypeOptions: [{
        "label": "摄像机",
        "value": "1"
      }, {
        "label": "面板机",
        "value": "2"
      }, {
        "label": "其他",
        "value": "3"
      }],
      isOnOptions: [{
        "label": "打开",
        "value": true
      }, {
        "label": "关闭",
        "value": false
      }],
      deptOptions: []
    }
  },
  computed: {},
  watch: {
    updateData: function (newValue, oldValue) {
      if (this.isUpdate) {
        this.$nextTick(() => {
          for (let k in this.formData) {
            if(k=='deptId'){
              this.$set(this.formData, k, Number(newValue[k]));
            }else{
              this.$set(this.formData, k, newValue[k]);
            }
          }
        })
      }
    }
  },
  created() {
    this.createDeptOptions();
  },
  mounted() {},
  methods: {
    onOpen() {
    },
    onClose() {
      this.$refs['elForm'].resetFields()
      this.$emit('onClose')
    },
    close() {
      this.$emit('update:visible', false)
    },
    handleConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        if (this.isUpdate) {
          this.update();
        }
        
      })
    },
    update () {
      deviceApi
        .updateDevice(this.formData)
        .then(res => {
          this.$message.success(res.msg);
          this.close();
          this.$parent.getList();
        })
        .catch(error => {
          this.$message.error(error);
        });
    },
    createDeptOptions(){
      whiteApi.getDeptOptions().then(response => {
        this.deptOptions = response.data;
      });
    },
  }
}

</script>
<style>
</style>
